<template>
  <div>
    <table v-if="giftChat" class="cs-detail-card">
      <tr>
        <td>语音时长(分钟)：</td>
        <td>{{ (giftChat.voiceTime / 60).toFixed(0) }}</td>
        <td>视频时长(分钟)：</td>
        <td>{{ (giftChat.videoTime / 60).toFixed(0) }}</td>
        <td>收礼钻石总价值：</td>
        <td>{{ '-' }}</td>
      </tr>
      <tr>
        <td>语音接通次数：</td>
        <td>{{ giftChat.voiceConnTimes }}</td>
        <td>视频接通次数：</td>
        <td>{{ giftChat.videoConnTimes }}</td>
        <td>收礼次数：</td>
        <td>{{ giftChat.getGiftTimes }}</td>
      </tr>
      <tr>
        <td>语音接通人数：</td>
        <td>{{ giftChat.voiceConnUsers }}</td>
        <td>视频接通人数：</td>
        <td>{{ giftChat.videoConnUsers }}</td>
        <td>收礼人数：</td>
        <td>{{ giftChat.getGiftUsers }}</td>
      </tr>
      <tr>
        <td>语音被叫次数：</td>
        <td>{{ giftChat.voiceGetTimes }}</td>
        <td>视频被叫次数：</td>
        <td>{{ giftChat.videoGetTimes }}</td>
        <td>喜欢次数：</td>
        <td>{{ '-' }}</td>
      </tr>
      <tr>
        <td>语音被叫人数：</td>
        <td>{{ giftChat.voiceGetUsers }}</td>
        <td>视频被叫人数：</td>
        <td>{{ giftChat.videoGetUsers }}</td>
        <td>被喜欢次数：</td>
        <td>{{ '-' }}</td>
      </tr>
    </table>

    <el-divider />
    <table v-if="giftChat" class="cs-detail-card">
      <tr>
        <td>主动语音次数：</td>
        <td>{{ giftChat.voiceSendTimes }}</td>
        <td>主动视频次数：</td>
        <td>{{ giftChat.videoSendTimes }}</td>
        <td>主动打招呼次数：</td>
        <td>{{ giftChat.hiTimes }}</td>
      </tr>
      <tr>
        <td>主动语音成功次数：</td>
        <td>{{ giftChat.voiceSendConn }}</td>
        <td>主动视频成功次数：</td>
        <td>{{ giftChat.videoSendConn }}</td>
      </tr>
      <tr>
        <td>被搭讪数：</td>
        <td>{{giftChat.replyItem.imMsgCount}}</td>
        <td>搭讪回复率（5min）：</td>
        <td>{{ giftChat.replyItem.fiveMinutes > 0 ? (giftChat.replyItem.fiveMinutes / giftChat.replyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.replyItem.fiveMinutes > 0 ? giftChat.replyItem.fiveMinutes : 0}})</td>
        <td>搭讪回复率（15min）：</td>
        <td>{{ giftChat.replyItem.fifteenMinutes > 0 ? (giftChat.replyItem.fifteenMinutes / giftChat.replyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.replyItem.fifteenMinutes > 0 ? giftChat.replyItem.fifteenMinutes : 0}})</td>
        <td>搭讪回复率（30min）：</td>
        <td>{{ giftChat.replyItem.halfHour > 0 ? (giftChat.replyItem.halfHour / giftChat.replyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.replyItem.halfHour > 0 ? giftChat.replyItem.halfHour : 0}})</td>
        <td>搭讪回复率（60min）：</td>
        <td>{{ giftChat.replyItem.oneHour > 0 ? (giftChat.replyItem.oneHour / giftChat.replyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.replyItem.oneHour > 0 ? giftChat.replyItem.oneHour : 0}})</td>
        <td>搭讪回复率（120min）：</td>
        <td>{{ giftChat.replyItem.towHour > 0 ? (giftChat.replyItem.towHour / giftChat.replyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.replyItem.towHour > 0 ? giftChat.replyItem.towHour : 0}})</td>
      </tr>
      <tr>
        <td>搭讪数：</td>
        <td>{{giftChat.byReplyItem.imMsgCount}}</td>
        <td>搭讪被回复率（5min）：</td>
        <td>{{ giftChat.byReplyItem.fiveMinutes > 0 ? (giftChat.byReplyItem.fiveMinutes / giftChat.byReplyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.byReplyItem.fiveMinutes > 0 ? giftChat.byReplyItem.fiveMinutes : 0}})</td>
        <td>搭讪被回复率（15min）：</td>
        <td>{{ giftChat.byReplyItem.fifteenMinutes > 0 ? (giftChat.byReplyItem.fifteenMinutes / giftChat.byReplyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.byReplyItem.fifteenMinutes > 0 ? giftChat.byReplyItem.fifteenMinutes : 0}})</td>
        <td>搭讪被回复率（30min）：</td>
        <td>{{ giftChat.byReplyItem.halfHour > 0 ? (giftChat.byReplyItem.halfHour / giftChat.byReplyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.byReplyItem.halfHour > 0 ? giftChat.byReplyItem.halfHour : 0}})</td>
        <td>搭讪被回复率（60min）：</td>
        <td>{{ giftChat.byReplyItem.oneHour > 0 ? (giftChat.byReplyItem.oneHour / giftChat.byReplyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.byReplyItem.oneHour > 0 ? giftChat.byReplyItem.oneHour : 0}})</td>
        <td>搭讪被回复率（120min）：</td>
        <td>{{ giftChat.byReplyItem.towHour > 0 ? (giftChat.byReplyItem.towHour / giftChat.byReplyItem.imMsgCount * 100).toFixed(2) : 0 }}% ({{ giftChat.byReplyItem.towHour > 0 ? giftChat.byReplyItem.towHour : 0}})</td>
      </tr>
    </table>

    <div class="cs-filter-container" style="margin-top:20px">
      <el-input v-model="listQuery.targetId" clearable placeholder="对方ID" />
      <!--<el-select v-model="listQuery.direction" clearable placeholder="类型">-->
      <!--<el-option label="对方发起语音" :value="0" />-->
      <!--<el-option label="对方发起视频" :value="1" />-->
      <!--<el-option label="自己发起语音" :value="4" />-->
      <!--<el-option label="自己发起视频" :value="5" />-->
      <!--</el-select>-->
      <el-select
        v-model="listQuery.stars"
        clearable
        placeholder="用户打分"
        style="width: 90px"
      >
        <el-option label="1" :value="1"></el-option>
        <el-option label="2" :value="2"></el-option>
        <el-option label="3" :value="3"></el-option>
        <el-option label="4" :value="4"></el-option>
        <el-option label="5" :value="5"></el-option>
      </el-select>
      <el-select v-model="listQuery.chatType" clearable placeholder="类型">
        <el-option label="视频" :value="0"></el-option>
        <el-option label="语音" :value="1"></el-option>
      </el-select>
      <el-select v-model="listQuery.from" clearable placeholder="发起人">
        <el-option label="自己发起" :value="1"></el-option>
        <el-option label="对方发起" :value="2"></el-option>
      </el-select>
      <el-input v-model="listQuery.minRate" clearable placeholder="最小鉴黄分数" type="number"></el-input>
      -
      <el-input v-model="listQuery.maxRate" clearable placeholder="最大鉴黄分数" type="number"></el-input>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="listGiftChat"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="giftChatList.list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="对方ID">
          <template slot-scope="{ row }">
            <TooptipsCom v-if="targetUser(row.fromUser, row.toUser)>0" :user-id="targetUser(row.fromUser, row.toUser)" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户打分" prop="stars">
        </el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="{ row }">{{
            chatType(row.chatType, row.fromUser)
          }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">

          <template slot-scope="{ row }">
            <span v-if="row.state === 2 && !row.acceptTime">未接通</span>
            <span v-else>{{row.state | state}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束方式">
          <template slot-scope="{ row }">{{
            endDesc(row.endUser, row.endType)
          }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="时长(分钟)">
          <template slot-scope="{ row }">
            {{ duration(row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="等待时长(秒)">
          <template slot-scope="{ row }">
            {{ awaitTime(row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼物数量">
          <template slot-scope="{ row }">
            直购: {{ row.giftPay || 0 }}<br>
            背包: {{ row.giftPackSack || 0 }}<br>
          </template>
        </el-table-column>
        <el-table-column align="center" label="场景">
          <template slot-scope="{ row }">{{
            context_items[row.context]
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼物详情">
          <template slot-scope="{ row }">
            {{ row.giftDetail }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="消耗">
          <template slot-scope="{ row }">
            {{ consume(row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="获得积分">
          <template slot-scope="{ row }">
            {{ row.pointGain / 100 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="最大鉴黄分数">
          <template slot-scope="{ row }">
            {{ row.maxRate }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="发起时间">
          <template slot-scope="{ row }">{{
            row.startTime | parseTime
          }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束时间">
          <template slot-scope="{ row }">{{
            row.endTime | parseTime
          }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="80"
        >
          <template slot-scope="{row}">
            <el-button
              v-if="row.chatType === 0"
              type="primary"
              size="mini"
              @click="onView(row.channelId)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="giftChatList.total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>
<script>
  import TablePagination from '@/components/TablePagination'
  import { xhrGetGiftChat, xhrListGiftChat } from '@/api/account'

  export default {
    components: { TablePagination },
    filters: {
      state(val) {
        switch (val) {
          case 0:
            return '待接通'
          case 1:
            return '进行中'
          case 2:
            return '已结束'
          case 3:
            return '未接通'
          default:
            return '未知'
        }
      }
    },

    data() {
      const query = this.$route.query
      return {
        context_items: {
          1: '（花伴交友）IM内语音点播',
          2: '（花伴交友）IM内视频点播',
          3: '（花伴交友）缘分页面随机视频',
          4: '（花伴交友）缘分封面内语音点播',
          5: '（花伴交友）缘分封面内视频点播',
          6: '（花伴交友）详情页内语音点播',
          7: '（花伴交友）详情页内视频点播',
          8: '（花伴交友）随机语音匹配',
          9: '（花伴交友）随机视频匹配',
          10: '（花伴约会）IM内语音点播',
          11: '（花伴约会）IM内视频点播',
          12: '（花伴约会）随机语音匹配',
          13: '（花伴约会）随机视频匹配',
          14: '（花伴约会）封面内语音点播',
          15: '（花伴约会）封面内视频点播',
          16: '（花伴约会）详情页内语音点播',
          17: '（花伴约会）详情页内视频点',
          18: ' (花伴交友)音视频历史记录-语音点播',
          19: ' (花伴交友)音视频历史记录-视频点播',
          20: ' (花伴约会)音视频历史记录-语音点播',
          21: ' (花伴约会)音视频历史记录-视频点播'
        },
        listQuery: {
          limit: 20,
          offset: 0,
          userId: (query && query.id) || null,
          targetId: '',
          chatType: '',
          from: '',
          startTime: '',
          endTime: '',
          direction: '',
          maxRate: '',
          minRate: ''
        },
        defaultQueryParams: {
          limit: 20,
          offset: 0,
          userId: (query && query.id) || null
        },
        daterangeValue: [],
        giftChat: null,
        giftChatList: {}
      }
    },
    created() {
      this.listGiftChat()
    },
    methods: {
      doSearch() {
        this.listGiftChat()
      },
      listGiftChat() {
        xhrGetGiftChat(this.listQuery)
          .then(resp => {
            this.giftChat = resp.data
          })
          .catch(err => {
            this.$message.error(err)
          })
        const params = Object.assign({}, this.listQuery)
        if (params.from) {
            if (params.from === 1) {
              params.fromUser = params.userId
            } else {
              params.toUser = params.userId
            }
        }
        if (params.maxRate) {
          params.maxRate = Math.min(params.maxRate, 100)
        }
        if (params.minRate) {
          params.minRate = Math.max(params.minRate, 0)
          if (params.maxRate) {
            params.minRate = Math.min(params.minRate, params.maxRate)
          }
        }
        xhrListGiftChat(params)
          .then(resp => {
            this.giftChatList = resp.data
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      targetUser(from_user, to) {
        if (from_user.toString() === this.listQuery.userId) {
          console.log('return to...', to)
          return to || '未知'
        }
        return from_user || '未知'
      },
      chatType(type, user) {
        if (user.toString() === this.listQuery.userId) {
          switch (type) {
            case 0:
              return '视频'
            case 1:
              return '语音'
          }
        } else {
          switch (type) {
            case 0:
              return '视频'
            case 1:
              return '语音'
          }
        }
      },
      endDesc(user, endType) {
        let result = ''
        if (user) {
          if (user.toString() === this.listQuery.userId) {
            result = '自己'
          } else {
            result = '对方'
          }
        }
        switch (endType) {
          case 0:
            result += '拒接'
            break
          case 1:
            result += '挂断'
            break
          case 2:
            result += '掉线'
            break
          case 3:
            result += '超时未接'
            break
          case 4:
            result += '系统中断'
            break
          default:
            result = '未知'
        }
        return result
      },
      awaitTime(row) {
        if (row.acceptTime && row.startTime) {
          return ((new Date(row.acceptTime) - new Date(row.startTime)) / 1000).toFixed(2)
        } else if (row.endTime && row.startTime){
          return ((new Date(row.endTime) - new Date(row.startTime)) / 1000).toFixed(2)
        }
        return '-'
      },
      duration(row) {
        if (row.acceptTime && row.endTime) {
          return ((new Date(row.endTime) - new Date(row.acceptTime)) / 60 / 1000).toFixed(2)
        }
        return '-'
      },
      consume(row) {
        const result = []
        if (row.tryCardCount) {
          result.push('试聊卡*' + row.tryCardCount)
        }
        if (row.diamondConsume) {
          result.push('钻石*' + row.diamondConsume / 10)
        }
        if (row.videoCardCount) {
          result.push('视频卡*' + row.videoCardCount)
        }
        if (row.voiceCardCount) {
          result.push('语音卡*' + row.voiceCardCount)
        }
        return result.join(' ')
      },

      onView(channelId) {
        window.open(
          '/anchor/video-thumb-all?id=' + channelId
        )
      }
    }
  }
</script>
